// import { forwardRef, memo } from 'react'
import { Flex, Tag } from 'antd'
import style from './style.module.less'

interface ParamsType {
  selectedTags: TagsType[]
  setSelectedTags: (a: TagsType | TagsType[]) => void
  tagsData: TagsType[]
  label: string
  mode?: string
}

interface TagsType {
  label: string
  value: string | number | undefined
  parent?: string
  active?: boolean
  children?: TagsType[]
}

const Filter = ({ selectedTags, setSelectedTags, tagsData, label, mode }: ParamsType) => {
  const handleChange = (tag: TagsType, checked: boolean) => {
    //需要多选后续可以优化
    if (mode === 'Multiple') {
      console.log(checked)
      // const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter((t: any) => t !== tag)
      // setSelectedTags(nextSelectedTags)
    } else {
      const nextSelectedTags = tag
      setSelectedTags(nextSelectedTags)
    }
  }
  return (
    <Flex gap={4} wrap="nowrap" align="flex-start">
      <span className={style.label}>{label}:</span>
      <div className={style.filterItemWrap}>
        {tagsData.map<React.ReactNode>((tag) => (
          <div key={tag.value} className={style.filterBox}>
            <Tag.CheckableTag
              key={tag.value}
              checked={
                selectedTags?.find((item) => {
                  return item.value === tag.value
                })
                  ? true
                  : false
              }
              onChange={(checked) => handleChange(tag, checked)}>
              {tag.label}
            </Tag.CheckableTag>
          </div>
        ))}
      </div>
    </Flex>
  )
}

export default Filter
